<template>
  <div class="databoard-container">
    <div class="info-wrapper">
      <p class="info-wrapper__title">园区数据</p>
      <div class="pard-data">
        <div class="item"><span class="label">年度累计收费（元）</span><span class="value">{{ detail.annualIncome }}</span></div>
        <div class="item"><span class="label">入驻企业总数（个）</span><span class="value">{{ detail.enterpriseTotal }}</span></div>
        <div class="item"><span class="label">月卡车辆总数（辆）</span><span class="value">{{ detail.monthCardTotal }}</span></div>
        <div class="item"><span class="label">一体杆总数（台）</span><span class="value">{{ detail.chargePoleTotal }}</span></div>
      </div>
    </div>
    <div ref="chart" style="height: 600px;" />
  </div>
</template>
<script>
import { getWorkbenchDetailAPI } from '@/apis/workbench'
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  GridComponent,
  MarkLineComponent,
  TitleComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  TooltipComponent,
  GridComponent,
  MarkLineComponent,
  BarChart,
  CanvasRenderer,
  TitleComponent
])

export default {
  name: 'Workbench',
  data() {
    return {
      detail: {},
      chart: null
    }
  },
  async created() {
    await this.getDetail()
    // console.log('cretaed' + this.detail)
    this.initChart() // 组件挂载后初始化图表
  }, mounted() {
    // console.log('mounted' + this.detail)

    // this.initChart() // 组件挂载后初始化图表
  }, beforeDestroy() {
    if (this.chart) {
      this.chart.dispose() // 组件销毁前释放图表实例，避免内存泄漏
    }
  },
  methods: {
    initChart() {
      // 基于准备好的 DOM，初始化 ECharts 实例
      this.chart = echarts.init(this.$refs.chart)

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '年度收入统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            // 计算总和
            // console.log(params)
            let total = 0
            params.forEach(item => {
              total += item.value // 假设 value 是数值
            })

            // 构建 tooltip 内容
            let result = `总和: ${total}<br/>`
            params.forEach(item => {
              result += `${item.seriesName}: ${item.value}<br/>`
            })
            return result
          }
        },
        xAxis: {
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          data: this.detail.annualIncomeArray.xmonth
        },
        yAxis: {},
        series: [
          {
            name: '物业费',
            type: 'bar',
            stack: 'income',
            // data: [5, 20, 36, 10, 10, 20]
            data: this.detail.annualIncomeArray.ybuilding
          },
          {
            name: '行车收入',
            type: 'bar',
            stack: 'income',
            data: this.detail.annualIncomeArray.yparking
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      this.chart.setOption(option)
    },
    async getDetail() {
      const res = await getWorkbenchDetailAPI()
      console.log(res)
      this.detail = res.data
    }
  }
}
</script>
<style scoped lang="scss">
.info-wrapper{
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    min-width: 260px;
    .info-wrapper__title{
    font-size: 14px;
    color: #303035;
    font-weight: 500;
    margin-bottom: 20px;
  }
    .pard-data{
      display: flex;
    justify-content: space-between;
      .item{
        display: flex;
        flex-direction: column;
        .label{
          color: #909399;
          margin-bottom: 12px;
        }
        .value{
          color: #303035;
          font-weight: 500;
          font-size: 24px;
        }
      }
    }
}
</style>
